<template>
  <div @mouseover="mouseover" @mouseout="mouseout">
      <div style="float:left;width:178px;">
          <el-upload class="avatar-uploader" action="seting" :show-file-list="false" :data="data" :auto-upload="true" accept="image/jpeg,image/png" :http-request="uploadimg">
              <img v-if="imageUrl" :src="imageUrl" class="el-upload-list__item-thumbnail" :on-preview="handlePictureCardPreview" :alt="data.optionvalue" style="width:178px;height:178px">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="width:178px;height:178px"></i>
          </el-upload>
      </div>

      <div class="mask" style="float:left" v-show="showflag">
          <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview()">
                  <i class="el-icon-zoom-in"></i>
              </span>
              &nbsp; &nbsp; &nbsp; &nbsp;
              <span class="el-upload-list__item-preview" @click="handlePictureCardDelete()">
                  <i class="el-icon-delete"></i>
              </span>
          </span>
      </div>
      <div>
          {{data.optionvalue}}
      </div>
      <!--放大-->
      <el-dialog :visible.sync="dialogVisible" v-el-drag-dialog :close-on-click-modal="false" :title="imgtitle">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: {
      data: { type: Object },
      imgUrl: { type: String },
      SQLKEY: { type: String },
      OptionClass: { type: String },
      hospcode: { type: String },
      objectid: { type: String },
      macaddress: { type: String },
  },
  data() {
      return {
          dialogImageUrl: "",
          dialogVisible: false,
          disabled: false,
          showflag: false,
          imageUrl: "",
          imgtitle: "",
      };
  },
  updated() {},
  created() {
      this.$tool
          .request({
              url: "ucent/setting",
              method: "post",
              data: {
                  action: "getImg",
                  URL: this.data.optionvalue,
              },
          })
          .then((response) => {
              if (response.errcode == "1") {
                  this.imageUrl = response.pic;
              } else {
                  this.imageUrl = "";
              }
          })
          .catch((e) => {
              this.$message.warning(e);
          });
  },
  methods: {
      handlePictureCardPreview() {
          this.dialogImageUrl = this.imageUrl;
          this.imgtitle = this.data.optionvalue;
          this.dialogVisible = true;
      },
      handlePictureCardDelete() {
          this.$tool
              .request({
                  url: "ucent/setting",
                  method: "post",
                  data: {
                      action: "deleteImg",
                      optionclass: this.OptionClass,
                      sqlkey: this.SQLKEY,
                      optioncode: this.data.optioncode,
                      URL: this.data.optionvalue,
                      hospcode: this.hospcode,
                      objectid: this.objectid,
                      macaddress: this.macaddress,
                  },
              })
              .then((response) => {
                  if (response.errcode == "1") {
                      this.$pub.message(this, "图片删除成功！", "success");
                      this.imageUrl = "";
                  } else {
                      this.$alert("图片删除失败！", "提示");
                  }
              })
              .catch((e) => {
                  this.$message.warning(e);
              });
      },
      uploadimg(param) {
          this.$emit("change", param);
      },
      mouseover() {
          this.showflag = true;
      },
      mouseout() {
          this.showflag = false;
      },
  },
};
</script>
<style scoped>
.mask {
  position: relative;
  top: 148px;
  left: -178px;
  color: white;
  background: rgba(101, 101, 101, 0.6);
  font-size: 18px;
  opacity: 0.9;
  width: 178px;
  text-align: center;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>